<template>
  <div id="content">
    <van-row v-show="fail_reason && used_userId == userId && status == 2">
      <van-col
        style="background-color:#fff;color:red;padding:0 16px;"
        span="24"
      >审核不通过原因：{{fail_reason}}</van-col>
    </van-row>
    <van-row style="background-color:#fff;padding:15px 0;">
      <van-col span="24" style="text-align:center">
        <span class="detail_title">{{title}}</span>
      </van-col>
    </van-row>
    <van-row>
      <van-field label="客户姓名：">
        <span slot="input">{{userName}}</span>
      </van-field>
      <van-field label="客户电话：">
        <span slot="input" @click="call(cacheTel)" >{{cacheTel}}</span>
      </van-field>
      <van-field label="行业分类：">
        <span slot="input">{{getChosedClass(in_class)}}</span>
      </van-field>
      <van-field label="所在地区：">
        <span slot="input">{{address}}</span>
      </van-field>
      <van-field>
        <span slot="label">数&#12288;&#12288;量：</span>
        <span slot="input">{{num}}</span>
      </van-field>
      <van-field label="是否包邮：">
        <span slot="input">{{is_pinkage_text[is_pinkage]}}</span>
      </van-field>
      <van-field label="入手价格：">
        <span slot="input">￥{{src_price}}</span>
      </van-field>
      <van-field    >
        <span slot="label" >价&#12288;&#12288;格：</span>
        <input slot="input" type="number" style="border:0;color:red;" placeholder="请填写价格"  v-model="price" />
      </van-field>
      <van-field label="新旧程度：" style="border-bottom: 1px solid #ebedf0;">
        <span slot="input">{{getChosedLevel(new_level)}}</span>
      </van-field>
      <div  class="van-cell van-field" style="display:flex;flex-direction:column;">
        <div style="width:100%;display:flex;flex-direction:row;line-height:14px;">
          <div class="van-cell__title van-field__label" style="line-height:40px;"><span>是否认证：</span></div>
          <div class="van-cell__value">
            <div class="van-field__body">
              <div class="van-field__control">
                <img v-if="isCertificate" :src="logo_certificate" width="45px" />
                <img v-else :src="logo_uncertificate" width="45px" />
              </div>
            </div>
          </div>
        </div>
        <div v-if="isCertificate && status == 3" style="height:40px;padding:8px 0;color:#ee3f00;font-size:12px;line-height:14px;">
          已认证设备经过平台系统检测，<br/>
          官方品质保障，可放心交易。
        </div>
        <div v-else style="height:40px;padding:8px 0;color:#ee3f00;font-size:12px;line-height:14px;">
          未认证设备没有经过系统检测，平台对该信息真实性不做任何承诺；<br/>
          请慎重交易，交易结果由买卖双方自行负责。
        </div>
      </div>
      <van-row style="background-color:#fff;margin-top:20px;padding-top:20px;">
        <van-col span="24" style="text-align:center">
          <span class="detail_title">详细介绍</span>
        </van-col>
      </van-row>
      <van-row style="background-color:#fff;">
        <van-col span="24">
          <div
            style="margin:10px 16px;border:1px solid #ebedf0;background-color:#fff;padding:10px 16px;"
          >{{detail}}</div>
        </van-col>
      </van-row>
    </van-row>
    <van-row v-for="(image, index) in images" :key="index" style="background-color:#fff;">
      <van-col span="24">
        <div style="margin:0 16px;">
          <img
            v-lazy="image"
            width="100%"
            :style="index == (images.length - 1)?'margin-bottom:16px':'margin-bottom:6px'"
          />
        </div>
      </van-col>
    </van-row>
    
    <van-row>
      <van-col span="24" style="position:fixed;bottom:0">
        <van-button
          style="background-color:#EE3F00;color:#fff;width:100%;font-size:16px;"
          @click="changePrice"
        >修改商品金额</van-button>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { Row, Col, Field, Image, List, Popup, Divider, Toast, Dialog } from 'vant';
import { listUsed, usedDetail, dicItems, authInfo, updateUsedPrice } from '@/api/api';
import { setLocalStorage } from '@/utils/local-storage';
import logo_default from '@/assets/images/logo.jpg';
import areaList from '@/views/user/module-address-edit/area.json';
import logo_certificate from '@/assets/images/certificate.png';
import logo_uncertificate from '@/assets/images/uncertificate.png';
import wx from 'weixin-js-sdk';
export default {
  name: 'client-used-detail',
  props: {
    usedId: [String, Number]
  },
  data() {
    return {
      logo_certificate: logo_certificate,
      logo_uncertificate: logo_uncertificate,
      userName:'',
      cacheTel:'',
      title: '',
      new_level: 1,
      in_class: 1,
      price: 0,
      src_price: 0,
      is_pinkage: 0,
      is_pinkage_text: ['包邮', '到付'],
      classoptions: [],
      leveloptions: [],
      num: 0,
      detail: '',
      images: [],
      list: [],
      areaList: areaList,
      area_code: '',
      address: '',
      page: 0,
      limit: 4,
      finished: true,
      loading: false,
      tel: '',
      mobile: '',
      classId: 'USED.PUBLISH.CLASS',
      newLevelId: 'USED.PUBLISH.NEW.LEVEL',
      fail_reason: '',
      used_userId: -1,
      userId: -1,
      status: -1,
      userStatus: 0,
      isAttention: 0,
      isCertificate: false,
    };
  },
  created() {
    this.initClassOption();
    this.initNewLevelOption();
    this.init();
    this.refreshUserInfo();
  },
  watch: {
    $route: 'reInit'
  },
  methods: {
    refreshUserInfo() {
      authInfo().then(res => {
        this.userId = res.data.data.userId;
        this.mobile = res.data.data.mobile || '';
        this.userStatus = res.data.data.status;
        this.isAttention = res.data.data.isAttention;
      });
    },
    getChosedClass(class_value) {
      for (let i in this.classoptions) {
        if (class_value == this.classoptions[i].value) {
          return this.classoptions[i].text;
        }
      }
    },
    getChosedLevel(level_value) {
      for (let i in this.leveloptions) {
        if (level_value == this.leveloptions[i].value) {
          if (level_value == -1) {
            return '';
          } else {
            return this.leveloptions[i].text;
          }
        }
      }
    },
    initClassOption() {
      dicItems({ groupId: this.classId })
        .then(res => {
          let list = res.data.data.list;
          for (let i in list) {
            let opiton = {
              text: list[i].itemName,
              value: parseInt(list[i].itemValue)
            };
            this.classoptions.push(opiton);
          }
        })
        .catch(() => {});
    },
    initNewLevelOption() {
      dicItems({ groupId: this.newLevelId })
        .then(res => {
          let list = res.data.data.list;
          for (let i in list) {
            let opiton = {
              text: list[i].itemName,
              value: parseInt(list[i].itemValue)
            };
            this.leveloptions.push(opiton);
          }
        })
        .catch(() => {});
    },
    init() {
      usedDetail({ usedId: this.usedId })
        .then(res => {
          this.userName = res.data.data.user.name;
          this.cacheTel = res.data.data.cacheTel;
          this.title = res.data.data.title;
          this.in_class = res.data.data.inClass;
          this.area_code = res.data.data.areaCode;
          this.address = this.getAddressByDistrictCode(res.data.data.areaCode);
          this.num = res.data.data.num;
          this.price = res.data.data.price;
          this.src_price = res.data.data.srcPrice;
          this.new_level = res.data.data.newLevel;
          this.is_pinkage = res.data.data.postage;
          this.detail = res.data.data.detail;
          this.images = res.data.data.images;
          this.tel = res.data.data.tel;
          this.fail_reason = res.data.data.failReason;
          this.used_userId = res.data.data.userId;
          this.status = res.data.data.status;
          this.isCertificate = res.data.data.isCertificate;
          //查询detail完成后加载更多执行
          this.finished = false;
        })
        .catch(e => {});
    },
    reInit() {
      Object.assign(this.$data, this.$options.data.call(this));
      document.getElementById('content').scrollTop = 0;
      this.init();
    },
    getAddressByDistrictCode(district_code) {
      if(district_code == undefined || district_code == null || district_code == ''){
        return '地区未知';
      }
      let province_code = district_code.substring(0, 2) + '0000';
      let city_code = district_code.substring(0, 4) + '00';
      let province_name = areaList.province_list[province_code];
      let city_name = areaList.city_list[city_code];
      let district_name = areaList.county_list[district_code];
      return province_name + city_name + district_name;
    },
    itemClick(id) {
      this.$router.replace(`/info/used-detail/${id}`);
    },
    getSrc(item) {
      let image = logo_default;
      if (item.images != null && item.images.length > 0) {
        image = item.images[0];
      }
      return image;
    },
    onLoad() {
      if (this.page != 0 && this.list.length <= 10) {
        this.page = 0;
        this.list = [];
      }
      this.page++;
      listUsed({
        page: this.page,
        limit: this.limit,
        areaCode: this.area_code,
        inClass: -1,
        newLevel: -1,
        usedId: this.usedId,
        sort: 'update_time'
      })
        .then(res => {
          this.list.push(...res.data.data.list);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch(e => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },
    changePrice() {
       this.$dialog
        .confirm({
          message: '确认修改商品金额吗',
          cancelButtonText: '再想想'
        })
        .then(() =>
          updateUsedPrice({ id: this.usedId, price: this.price })
            .then(res => {
              return this.$dialog.alert({ message: '更新成功' });
            })
            .catch(err => {
              return this.$dialog.alert({ message: '更新失败' });
            })
        );
    },
    call(value) {
      window.location.href = 'tel:' + value;
    }
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Field.name]: Field,
    [Image.name]: Image,
    [List.name]: List,
    [Popup.name]: Popup,
    [Divider.name]: Divider,
    [Toast.name]: Toast,
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>
<style lang="scss" scoped>
/deep/ .van-cell:nth-child(7):after {
  border-bottom: 0;
}
/deep/ .van-field__label {
  width: 70px;
}
.detail_title {
  display: inline-block;
  min-width: 150px;
  font-size: 16px;
  line-height: 30px;
  border-bottom: 1px solid #ee3f00;
}
.useddetail /deep/ .van-field__control {
  margin: 10px 0;
  border: 1px solid #bbbbbb;
  -webkit-appearance: none;
}
.view-router {
  padding-bottom: 44px;
}

.more_recommend .van-divider {
  margin: 0px;
  padding-top: 15px;
}

.more_recommend .title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more_recommend .item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: -4px;
}

.more_recommend .van-cell {
  padding: 0px;
}

.more_recommend .cell-span {
  color: #969799;
  font-size: 12px;
}
/deep/ .van-button--default{
    border: 1px solid rgb(238, 63, 0);
}
</style>